<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<link rel="stylesheet" href="../../dist/mescroll.min.css">
		<link rel="stylesheet" href="swiper-3.3.1.min.css">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				-webkit-touch-callout:none;
				-webkit-user-select:none;
				-webkit-tap-highlight-color:transparent;
			}
			body{background-color: white}
			ul{list-style-type: none}
			a {text-decoration: none;color: #18B4FE;}
			
			/*模拟的标题*/
			.header{
				z-index: 9990;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				line-height: 16px;
				padding-top: 10px;
				height: 64px;
				text-align: center;
				background-color: white;
				box-sizing: border-box;
			}
			.header .btn-left{
				position: absolute;
				top: 0;
				left: 0;
				padding:12px;
			}
			.header .btn-right{
				position: absolute;
				top: 0;
				right: 0;
				padding:12px 8px;
			}
			.header .tip{
				margin-top: 4px;
				font-size: 12px;
				color: gray;
			}
			/*顶部菜单*/
			.header .nav{
				margin-top: 10px;
				border-bottom: 1px solid #ddd;
			}
			.header .nav p{
				display: inline-block;
				width: 22%;
				padding: 5px 0;
			}
			.header .nav .active{
				border-bottom: 1px solid #FF6990;
				color: #FF6990;
			}
			
			/*悬浮菜单*/
			.sticky-tabs{
				text-align: center;
				border-bottom: 1px solid #ddd;
				background-color: white;
			}
			.sticky-tabs .tab{
				display: inline-block;
				width: 30%;
				padding: 10px 0;
			}
			.sticky-tabs .tab-active{
				border-bottom: 1px solid #FF6990;
				color: #FF6990;
			}
			/*ios使用sticky样式实现*/
			.nav-sticky{
				z-index: 9999;/*需设置zIndex,避免在悬停时,可能会被列表数据遮住*/
				position: -webkit-sticky;
				position: sticky;
			    top: 0;/*相对mescroll的div悬停的位置*/
			}
			/*android和pc端悬停*/
			.nav-fixed{
				z-index: 9999;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
			}
			
			/*列表*/
			.swiper-container{
				position: fixed;
				top: 64px;
				left: 0;
				right: 0;
				bottom: 0;
			}
			/*展示上拉加载的数据列表*/
			.data-list li{
				position: relative;
				padding: 10px 8px 10px 120px;
				border-bottom: 1px solid #eee;
			}
			.data-list .pd-img{
				position: absolute;
				left: 18px;
				top: 18px;
				width: 80px;
				height: 80px;
			}
			.data-list .pd-name{
				font-size: 16px;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
			}
			.data-list .pd-price{
				margin-top: 8px;
				color: red;
			}
			.data-list .pd-sold{
				font-size: 12px;
				margin-top: 8px;
				color: gray;
			}
			/*隐藏*/
			.hide{display: none;}
		</style>
	</head>

	<body>
		<!--标题-->
		<div class="header">
			<a class="btn-left" href="../index.html">main</a>
			<p>轮播+吸顶悬浮</p>
			<!--菜单-->
			<div id="nav" class="nav">
				<p class="active" i="0">首页</p>
				<p i="1">奶粉</p>
				<p i="2">面膜</p>
				<p i="3">图书</p>
			</div>
		</div>
		
		<!--轮播-->
		<div id="swiper" class="swiper-container">
		    <div class="swiper-wrapper">
		    	
	        	<!--首页-->
		        <div id="mescroll0" class="swiper-slide mescroll">
					<img style="width: 100%;" src="../res/img/swiper.jpg"/>
					<!--
						悬浮菜单:
						1.ios的悬停效果,通过给stickyWarp添加sticky样式来实现
						2.android和pc端悬停效果,通过监听mescroll的scroll事件,控制sticky-tabs是否为fixed定位来实现
					-->
					<div id="stickyWarp">
						<div id="stickyTabs" class="sticky-tabs">
							<p class="tab tab-active" i="0">全部</p>
							<p class="tab" i="1">韩蜜</p>
							<p class="tab" i="2">美素</p>
						</div>
					</div>
					
					<!--dataListWarp用于装载上拉进度和数据列表,避免清空列表不满屏,导致点击悬浮菜单时会滑下来-->
					<div id="dataListWarp">
						<ul id="dataList0" class="data-list">
							<!--<li>
								<img class="pd-img" src="../res/img/pd1.jpg"/>
								<p class="pd-name">商品标题商品标题商品标题商品标题商品标题商品</p>
								<p class="pd-price">200.00 元</p>
								<p class="pd-sold">已售50件</p>
							</li>-->
						</ul>
					</div>
		        </div>
		    	
	        	<!--奶粉-->
		        <div id="mescroll1" class="swiper-slide mescroll">
					<ul id="dataList1" class="data-list"></ul>
		        </div>
		    	
	        	<!--面膜-->
		        <div id="mescroll2" class="swiper-slide mescroll">
					<ul id="dataList2" class="data-list"></ul>
		        </div>
		    	
	        	<!--图书-->
		        <div id="mescroll3" class="swiper-slide mescroll">
					<ul id="dataList3" class="data-list"></ul>
		        </div>
		        
		    </div>
		</div>
			
	</body>
	
	<script src="../../dist/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			var curNavIndex=0;//首页0; 奶粉1; 面膜2; 图书3;
			var mescrollArr=new Array(4);//4个菜单所对应的4个mescroll对象
			
			//初始化首页
			mescrollArr[0]=initMescroll("mescroll0", "dataList0", "dataListWarp");
			
			//初始化首页的悬浮菜单
			var stickyWarp=document.getElementById("stickyWarp");
			if(mescrollArr[0].os.ios){
				//ios的悬停效果,通过给stickyWarp添加nav-sticky样式来实现
				stickyWarp.classList.add("nav-sticky");
			}else{
				//android和pc端悬停效果,通过监听mescroll的scroll事件,控制sticky-tabs是否为fixed定位来实现
				stickyWarp.style.height=stickyWarp.offsetHeight+"px";//固定高度占位,避免悬浮时列表抖动
				var stickyTabs=document.getElementById("stickyTabs");
				mescrollArr[0].optUp.onScroll=function(mescroll, y, isUp){
					console.log("列表当前滚动的距离 y = " + y + ", stickyWarp.offsetTop = " + stickyWarp.offsetTop);
					if(y>=stickyWarp.offsetTop){
						stickyTabs.classList.add("nav-fixed");
					}else{
						stickyTabs.classList.remove("nav-fixed");
					}
				}
			}
			
			/*初始化菜单*/
			var pdType=0;//全部商品0; 韩蜜1; 美素2;
			$("#stickyTabs .tab").click(function(){
				var i=$(this).attr("i");
				if(pdType!=i) {
					//更改列表条件
					pdType=i;
					//变色
					$("#stickyTabs .tab").each(function(i,dom){
						if(dom.getAttribute("i")==pdType){
							dom.classList.add("tab-active");
						}else{
							dom.classList.remove("tab-active");
						}
					})
					/*调整dataListWarp的最小高度,使其刚好满屏,避免点击悬浮菜单时会滑下来;(这里每次点击都计算一次,毕竟轮播图高度改变或未能显示图都会影响计算的值)*/
					var minHight = mescrollArr[0].getClientHeight() - stickyWarp.offsetHeight;
					document.getElementById("dataListWarp").style.minHeight = minHight+"px";
					//重置列表数据
					mescrollArr[0].resetUpScroll();
				}
			})
			
			/*初始化轮播*/
			var swiper=new Swiper('#swiper', {
				observer: true,
		        onTransitionEnd: function(swiper){
		        	var i=swiper.activeIndex;//轮播切换完毕的事件
		        	changePage(i);
			    }
		    });
		    
		    /*初始化菜单*/
			$("#nav p").click(function(){
				var i=Number($(this).attr("i"));
				swiper.slideTo(i);//以轮播的方式切换列表
			})
			
			/*切换列表*/
			function changePage(i) {
				if(curNavIndex!=i) {
					//更改列表条件
					$("#nav p").each(function(n,dom){
						if (dom.getAttribute("i")==i) {
							dom.classList.add("active");
						} else{
							dom.classList.remove("active");
						}
					})
					//隐藏当前回到顶部按钮
					mescrollArr[curNavIndex].hideTopBtn();
					//取出菜单所对应的mescroll对象,如果未初始化则初始化
					if(mescrollArr[i]==null){
						mescrollArr[i]=initMescroll("mescroll"+i, "dataList"+i);
					}else{
						//检查是否需要显示回到到顶按钮
						var curMescroll=mescrollArr[i];
						var curScrollTop=curMescroll.getScrollTop();
						if(curScrollTop>=curMescroll.optUp.toTop.offset){
							curMescroll.showTopBtn();
						}else{
							curMescroll.hideTopBtn();
						}
					}
					//更新标记
					curNavIndex=i;
				}
			}
			
			/*创建MeScroll对象*/
			function initMescroll(mescrollId,clearEmptyId, warpId){
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
				var mescroll = new MeScroll(mescrollId, {
					//上拉加载的配置项
					up: {
						callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
						isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
						noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						empty: {
							icon: "../res/img/mescroll-empty.png", //图标,默认null
							tip: "暂无相关数据~", //提示
							btntext: "去逛逛 >", //按钮,默认""
							btnClick: function(){//点击按钮的回调,默认null
								alert("点击了按钮,具体逻辑自行实现");
							} 
						},
						clearEmptyId: clearEmptyId, //相当于同时设置了clearId和empty.warpId; 简化写法;默认null; 注意vue中不能配置此项
						toTop:{ //配置回到顶部按钮
							src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
							//offset : 1000
						},
						warpId: warpId, // 有悬浮的mescroll,让上拉进度装到dataListWarp里面
						lazyLoad: {
				        	use: true // 是否开启懒加载,默认false
				        }
					}
				});
				return mescroll;
			}
			
			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				//联网加载数据
				var dataIndex=curNavIndex; //记录当前联网的nav下标,防止快速切换时,联网回来curNavIndex已经改变的情况;
				getListDataFromNet(dataIndex, page.num, page.size, function(pageData){
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					console.log("dataIndex="+dataIndex+", curNavIndex="+curNavIndex+", page.num="+page.num+", page.size="+page.size+", pageData.length="+pageData.length);
					
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					//mescrollArr[dataIndex].endByPage(pageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
					
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//mescrollArr[dataIndex].endBySize(pageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
					
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//mescrollArr[dataIndex].endSuccess(pageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
					
					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
					mescrollArr[dataIndex].endSuccess(pageData.length);
					
					//设置列表数据
					setListData(pageData,dataIndex);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
	                mescrollArr[dataIndex].endErr();
				});
			}
			
			/*设置列表数据
			 * pageData 当前页的数据
			 * dataIndex 数据属于哪个nav */
			function setListData(pageData,dataIndex){
				var listDom=document.getElementById("dataList"+dataIndex);
				for (var i = 0; i < pageData.length; i++) {
					var pd=pageData[i];
					
					var str='<img class="pd-img" src="../res/img/loading-sq.png" imgurl="'+pd.pdImg+'"/>';
					str+='<p class="pd-name">'+pd.pdName+'</p>';
					str+='<p class="pd-price">'+pd.pdPrice+' 元</p>';
					str+='<p class="pd-sold">已售'+pd.pdSold+'件</p>';
					
					var liDom=document.createElement("li");
					liDom.innerHTML=str;
					listDom.appendChild(liDom);
				}
			}
			
			/*联网加载列表数据
			 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
			 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
			 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
			 * */
			function getListDataFromNet(curNavIndex,pageNum,pageSize,successCallback,errorCallback) {
				//延时一秒,模拟联网
                setTimeout(function () {
                	$.ajax({
		                type: 'GET',
		                url: '../res/pdlist1.json',
//		                url: '../res/pdlist1.json?curNavIndex='+curNavIndex+'&num='+pageNum+'&size='+pageSize,
		                dataType: 'json',
		                success: function(data){
		                	var listData=[];
		                	
		                	//curNavIndex 首页0; 奶粉1; 面膜2; 图书3;
		                	if(curNavIndex==0){
		                		//首页 (模拟分页数据)
								if (pdType==1) {
									//韩蜜
									for (var i = 0; i < data.length; i++) {
										if (data[i].pdName.indexOf("韩蜜")!=-1) {
											listData.push(data[i]);
										}
									}
								}else if (pdType==2) {
									//美素
									for (var i = 0; i < data.length; i++) {
										if (data[i].pdName.indexOf("美素")!=-1) {
											listData.push(data[i]);
										}
									}
								}else{
									// 全部
									for (var i = (pageNum-1)*pageSize; i < pageNum*pageSize; i++) {
										if(i==data.length) break;
										listData.push(data[i]);
									}
								}
								
		                	}else if(curNavIndex==1){
		                		//奶粉
		                		for (var i = 0; i < data.length; i++) {
		                			if (data[i].pdName.indexOf("奶粉")!=-1) {
		                				listData.push(data[i]);
		                			}
		                		}
		                		
		                	}else if(curNavIndex==2){
		                		//面膜
		                		for (var i = 0; i < data.length; i++) {
		                			if (data[i].pdName.indexOf("面膜")!=-1) {
		                				listData.push(data[i]);
		                			}
		                		}
		                		
		                	}else if(curNavIndex==3){
		                		//图书
		                		for (var i = 0; i < data.length; i++) {
		                			if (data[i].pdName.indexOf("图书")!=-1) {
		                				listData.push(data[i]);
		                			}
		                		}
		                	}
		                	
		                	//回调
		                	successCallback(listData);
		                },
		                error: errorCallback
		            });
                },500)
			}
			
		});
	</script>

</html>